<template>
  <yk-table>
    <yk-table-column property="name" label="分组名称"></yk-table-column>
    <yk-table-column property="value" label="关联文章数"></yk-table-column>
    <yk-table-column property="moment" label="创建时间"></yk-table-column>
    <yk-table-column property="manage" label="操作" align="right"></yk-table-column>
    <template #tbody>
      <tr v-for="(item, index) in subsetStore.data" :key="index" class="yk-table__row">
        <td class="yk-table__cell">
          <yk-input v-model="item.name" @focus="focusSubset(item.id)" @blur="blurSubset(item.id)" />
        </td>
        <td class="yk-table__cell">
          {{ item.value }}
        </td>
        <td class="yk-table__cell">
          {{ item.moment }}
        </td>
        <td class="yk-table__cell text-right">
          <yk-text type="primary" style="cursor: pointer" @click="deleteSubset(item.id)">删除</yk-text>
        </td>
      </tr>
    </template>
  </yk-table>
</template>

<script setup lang="ts">
import { useSubsetStore } from '@/stores/subset';
import { useSubset } from '@/hooks/subset';
const { deleteSubset, updateSubset } = useSubset('');
const subsetStore = useSubsetStore();

// 当前分组名称
let nowName: string | number
// 聚焦事件
const focusSubset = (id: number | string) => {
  const result = subsetStore.data.find((item: { id: number | string }) => item.id === id)
  if (result) {
    nowName = result.name;
  }
};
// 失焦事件
const blurSubset = async (id: number | string) => {
  const result = subsetStore.data.find((item: { id: number | string }) => item.id === id)
  if (result && nowName !== result.name) {
    // 提交后端处理
    updateSubset(result)

  }
};


</script>

<style scoped></style>
